<template>
  <div class="dashboard-container">
    <!-- 用getters的辅助函数实现 -- 更简单 -->
    <div class="dashboard-text">name: {{ name }}</div>
    <!-- 从getters中获取数据 --- 比较简单 -->
    <div class="dashboard-text">name: {{ $store.getters.name }}</div>
    <!-- 直接从user模块中读取数据 渲染  -- 非常繁琐 -->
    <div class="dashboard-text">name: {{ $store.state.user.userInfo.username }}</div>
    <div class="test">666</div>
    <MyCard :list="arr">
      <!-- 利用template标签结合v-slot:插槽名来分发内容
      写在template标签的内容就会自动根据插槽名来分发内容
       -->
      <template v-slot:title>
        卡片标题
      </template>
      <!-- 卡片内容 没有写在template标签内，则会自动查匿名插槽
      并将内容插入到插槽位置上将其替换 -->
      <!-- 卡片内容 -->
      <!-- <template #2="scoped">  scoped是定义的名字 -->
      <!-- row必须和slot标签的row属性名一致 -->
      <template v-slot:2="{row}">
        <!-- 想用到item值 怎么办 ？ -->
        我是自定义内容: {{ row }}
      </template>
    </MyCard>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  data() {
    return {
      arr: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    // 调用接口 获取用户信息
    // 问题：跳转到其他页面，刷新浏览器的时候个人信息会清空
    // 因为个人信息不仅仅在首页中用到其他页面也会用到
    // 因此当我们跳转到其他页面的时候也需要获取到个人信息
    // 所以我们不能单独在首页中调用函数获取个人信息
    // 那在哪里调用这个函数比较合适呢？
    // 答：在一个全局的位置上调用即可，比如App.vue组件中，但是App.vue中调用虽然可以
    // 实现，但是不够好，因为在App.vue中调用也是需要进入页面才开始发起请求调用接口，
    // 能不能优化一下，在进入页面之前就调用函数获取用户信息呢 ？
    // 答：可以，在导航守卫中调用即可实现
    // 为什么要做这样的优化呢？答：因为进入这样做的话，用户进入系统就可以立刻看到登录者
    // 的信息了，这样提高用户体验。

    // this.$store.dispatch('user/getUserInfo')
  }
  // mounted(){}
}
</script>

<style lang="scss" scoped>
$height-coolor: red; // 1、 声明变量
//2、 也支持嵌套写法
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    color: $height-coolor
  }
  // &.test {
  //   font-size: 50px;
  // }
}
.dashboard-container{
  // 3、 &符表示 父选择器
  // 这个例子中的&就表示.dashboard-container这个类名对应的标签
    &::after {
      content: "测试";
      font-size: 50px;
  }
}
</style>
